import React from 'react';
import {Layout, Menu, Icon} from 'antd';
import {Link} from 'dva/router';

const {Header} = Layout;
const SubMenu = Menu.SubMenu;

const CommonHeader = (location) => {
  const logoStyle = {
    width: '120px',
    height: '31px',
    background: '#ffffff',
    borderRadius: '6px',
    margin: '16px 24px 16px 0',
    float: 'left',
    fontWeight: 'bold',
    textAlign: 'center',
    lineHeight: '31px'
  };
  return (
    <Header>
      <div className="logo"
           style={logoStyle}>投票管理后台
      </div>
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['/users']}
        selectedKeys={[location.pathname]}
        style={{lineHeight: '64px'}}
      >
        <Menu.Item key="/users">
          <Link to="/users"><Icon type="bars"/>用户</Link>
        </Menu.Item>
        <SubMenu title={<span><Icon type="home"/>投票</span>}>
          <Menu.Item key="/votes">
            <Link to="/votes"><Icon type="home"/>投票</Link>
          </Menu.Item>
          <Menu.Item key="/subjects">
            <Link to="/subjects"><Icon type="star-o"/>投票主题</Link>
          </Menu.Item>
          <Menu.Item key="/candidates">
            <Link to="/candidates"><Icon type="bulb"/>候选对象</Link>
          </Menu.Item>
        </SubMenu>

      </Menu>
    </Header>
  );
};

CommonHeader.propTypes = {};

export default CommonHeader;
